Hello, dashboards!
School of Mathematical and Physical Sciences
2024-09-27
Hello & Welcome!
Day 1 content is inspired by the workshop materials of:
Computation Setup
Make sure that you’ve completed the setup steps at
https://datavizatmq.netlify.app/workshop.html#software-setup
We’ll assume you
know some R and/or Python
have worked in RStudio and/or VS Code
want to learn about Quarto Dashboards
We’ll teach you
basics of a Quarto Dashboard
making your dashboards dashing ✨
some R and/or Python tips along the way
Hello, Dashboards!
With Quarto you can weave together narrative text and code to produce elegantly formatted output as documents, web pages, blog posts, books, and more…
Since Quarto 1.4!
markup (language) is a system for annotating a document in a way that is visually distinguishable from the content.Markdown is a lightweight markup language that you have to use code to add formatting elements to your content.Artwork by @allison_horst
---Let’s talk more about Quarto
Quarto had meaning in the history of publishing, which is the format of a book or pamphlet produced from full sheets printed with eight pages of text, four to a side, then folded twice to produce four leaves.R StudioR Studio (cont.)visual markdown editor as your default editor..rmd and .qmd are just a plain text file.render them and observe the output.03:00
Dashboard gallery
Dashboard basics
Dashboards are composed of cards.
Cards are arranged into rows and columns.
Pages, tabsets, and sidebars allow for more advanced layouts.
Let’s make a dashboard, step-by-step
First with R
Then with Python
First dashboard in R
format: dashboardLeft column
Right column
First dashboard in Python
format: dashboarddashboard-py.qmd
dashboard-py.qmd
dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```
```{python}
#| title: Highway vs. city mileage
(
ggplot(mpg, aes(x = "cty", y = "hwy"))
+ geom_point()
)
```
```{python}
#| title: Drive types
(
ggplot(mpg, aes(x = "drv"))
+ geom_bar()
)
```dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```
```{python}
#| title: Highway vs. city mileage
(
ggplot(mpg, aes(x = "cty", y = "hwy"))
+ geom_point()
)
```
```{python}
#| title: Drive types
(
ggplot(mpg, aes(x = "drv"))
+ geom_bar()
)
```Dashboard Layout
title and author are specified as they are with normal documents.logo and one or more nav-buttons:linkedin, facebook, reddit, twitter, and github.markdown headings and computational cells.orientation: columns in the yaml.R - Clone the GitHub repo posit-conf-2024/olympicdash (https://github.com/posit-conf-2024/olympicdash) and work on olympicdash-r-1.qmd.
Python - Clone the GitHub repo posit-conf-2024/olympicdash (https://github.com/posit-conf-2024/olympicdash) and work on olympicdash-py-1.qmd.
Your goal is to create one of the following dashboards.
titles to code cells.05:00
images folder.05:00
Reorganize the cards into rows and columns as shown below.
05:00
asdfas